<template>
  <div class="activity-container">
    <h3>最近动态</h3>
    <el-divider />
    <el-scrollbar height="300px">
      <div
        v-for="(activity, index) in activities"
        :key="index"
        class="activity-item"
      >
        <el-icon :size="18"><Notification /></el-icon>
        <span>{{ activity.time }} - {{ activity.message }}</span>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Notification } from "@element-plus/icons-vue";

const activities = ref([
  { time: "09:30", message: "用户张三注册成功" },
  { time: "10:15", message: "订单 #456789 付款成功" },
  { time: "11:00", message: "服务器负载达到 80%" },
  { time: "13:20", message: "新文章《Vue3 高级技巧》发布" },
  { time: "15:00", message: "系统更新补丁 1.0.2" },
]);
</script>

<style scoped>
.activity-container {
  height: 100%;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
</style>
